<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <div class="filter-container">
      <el-select v-model="listQuery.group_state" placeholder="订单状态" clearable style="width: 120px" class="filter-item" >
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
      <el-select v-model="listQuery.sort" placeholder="选择排序" style="width: 180px" class="filter-item" >
        <el-option v-for="item in sortOptions" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
      <el-select v-model="listQuery.gender" placeholder="选择性别" style="width: 120px" class="filter-item" >
        <el-option v-for="item in sexyOptions" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
      <el-date-picker v-model="listQuery.timeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"/>
      <el-input v-model="listQuery.search_num" placeholder="请输入订单编号或用户ID" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.goods_id" placeholder="请输入商品ID" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-checkbox v-model="listQuery.is_robot" :true-label="1" :false-label="0" class="filter-item" style="margin:0 15px;" >
        去除机器人数据
      </el-checkbox>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleRobotWish">
        发送机器人心愿
      </el-button>
    </div>
    <!-- 表格 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="ID" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.group_id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="发起人" width="100">
        <template slot-scope="scope">
          <div class="user-box">
            <wish-image :src="scope.row.small_avatar_url" radius="100" width="45" height="45" />
            <p class="user-name">{{ scope.row.nick_name }}</p>
            <p class="user-id">{{ scope.row.user_id }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品名称/编号" min-width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.goods_name }}
        </template>
      </el-table-column>
      <el-table-column label="市场价名称" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.platform_name }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="市场价格" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.platform_price }}
        </template>
      </el-table-column>
      <el-table-column label="发起时间" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.create_time }}
        </template>
      </el-table-column>
      <el-table-column label="等待支持时间" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.waitTime }}
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="created_at" label="所需心愿值" width="200">
        <template slot-scope="scope">
          {{ scope.row.display_time }}
        </template>
      </el-table-column> -->
      <el-table-column label="订单状态" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.group_state | statusFilter }}
        </template>
      </el-table-column>
      <el-table-column label="被付款次数" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.join_people }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="110" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleDis(row)">
            配置机器人
          </el-button>
          <el-button type="danger" size="mini" style="margin-top:5px" @click="handleCancel(row)">
            取消心愿
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.page_size" @pagination="fetchData"/>
    <!-- 弹窗 -->
    <el-dialog title="分配机器人" :visible.sync="robotVisiable" width="360px" :close-on-click-modal="false" @close="onRobotClose">
      <el-form ref="robotForm" :model="robotForm" :rules="robotFormRules" label-position="left" label-width="auto">
        <el-form-item label="机器人" prop="robot_user_id">
          <el-select v-model="robotForm.robot_user_id" placeholder="选择机器人" >
            <el-option v-for="item in robotList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="robotVisiable = false">取消</el-button>
        <el-button type="primary" @click="saveRobot">确认</el-button>
      </span>
    </el-dialog>
    <el-dialog title="发送机器人心愿" :visible.sync="robotWishVisiable" width="360px" :close-on-click-modal="false" @close="onRobotWishClose">
      <el-form ref="robotWishForm" :model="robotWishForm" :rules="robotWishFormRules" label-position="left" label-width="auto">
        <el-form-item label="商品" prop="goods_id">
          <el-select v-model="robotWishForm.goods_id" filterable placeholder="选择商品" style="width:100%">
            <el-option v-for="item in goodsList" :key="item.goods_id" :label="item.goods_name" :value="item.goods_id" >
              <span style="float: left">{{ item.goods_name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">¥{{ item.platform_price }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机器人" prop="robot_user_id">
          <el-select v-model="robotWishForm.robot_user_id" placeholder="选择机器人" style="width:100%" >
            <el-option v-for="item in robotList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="robotWishVisiable = false">取消</el-button>
        <el-button type="primary" @click="saveRobotWish">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { objRemove } from '@/utils'
import { getWishList, supportWish, addWish, cancelWish } from '@/api/order'
import { getProductList } from '@/api/product'
import { getRobotList } from '@/api/user'
// import moment from 'moment'
import WishImage from '@/components/Image'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { orderStatusOptions, orderSortOptions, sexyOptions } from '@/constant/options'
export default {
  name: 'OrderManage',
  components: { WishImage, Pagination },
  filters: {
    statusFilter(value) {
      const status = orderStatusOptions.find(item => item.value === value)
      return status ? status.name : ''
    }
  },
  data() {
    return {
      list: [],
      listLoading: true,
      listQuery: {
        page: 1,
        page_size: 15,
        group_state: -1,
        search_num: '',
        goods_id: '',
        sort: '',
        is_robot: 0,
        gender: -1,
        timeRange: []
      },
      statusOptions: orderStatusOptions,
      sortOptions: orderSortOptions,
      sexyOptions,
      total: 10,
      robotVisiable: false,
      robotWishVisiable: false,
      robotList: [],
      robotForm: {
        group_ids: '',
        robot_user_id: ''
      },
      robotWishForm: {
        goods_id: '',
        robot_user_id: ''
      },
      robotFormRules: {
        robot_user_id: [{ required: true, message: '请选择机器人', trigger: 'blur' }]
      },
      robotWishFormRules: {
        robot_user_id: [{ required: true, message: '请选择机器人', trigger: 'blur' }],
        goods_id: [{ required: true, message: '请选择商品', trigger: 'blur' }]
      },
      goodsList: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const params = objRemove(this.listQuery)
      if (params.timeRange.length > 0) {
        params.start_time = params.timeRange[0]
        params.end_time = params.timeRange[1]
      }
      getWishList(params).then(res => {
        res.data.data.forEach(item => {
          if (item.group_state === 1) {
            const waitTime = new Date() - new Date(item.create_time)
            const s = Math.floor(waitTime % (1000 * 60) / 1000)
            const m = Math.floor(waitTime % (1000 * 60 * 60) / (1000 * 60))
            const h = Math.floor(waitTime % (1000 * 60 * 60 * 24) / (1000 * 60 * 60))
            const day = Math.floor(waitTime / (1000 * 60 * 60 * 24))
            item.waitTime = `${h}小时${m}分${s}秒`
            if (day > 0) {
              item.waitTime = day + '天' + item.waitTime
            }
          }
        })
        this.list = res.data.data
        this.total = res.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    handleDis(row) {
      this.robotForm.group_ids = row.group_id
      this.robotVisiable = true
      getRobotList().then(res => {
        this.robotList = res.data.data
      })
    },
    handleCancel(row) {
      this.$confirm('确认取消?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '返回',
        type: 'warning'
      }).then(() => {
        cancelWish({ group_id: row.group_id }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.fetchData()
        })
      })
    },
    saveRobot() {
      this.$refs.robotForm.validate(async(valid) => {
        if (valid) {
          await supportWish(this.robotForm)
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.robotVisiable = false
          this.fetchData()
        } else {
          console.log('valid fail')
        }
      })
    },
    saveRobotWish() {
      this.$refs.robotWishForm.validate(async(valid) => {
        if (valid) {
          await addWish(this.robotWishForm)
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.robotWishVisiable = false
          this.fetchData()
        } else {
          console.log('valid fail')
        }
      })
    },
    onRobotClose() {
      this.robotForm = {
        group_ids: '',
        robot_user_id: ''
      }
    },
    onRobotWishClose() {
      this.robotForm = {
        goods_id: '',
        robot_user_id: ''
      }
    },
    handleRobotWish() {
      this.robotWishVisiable = true
      getRobotList().then(res => {
        this.robotList = res.data.data
      })
      getProductList({
        page: 1,
        page_size: 999,
        goods_status: 1
      }).then(res => {
        this.goodsList = res.data.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .detail-dialog{
  .el-dialog__body{
    padding: 10px 20px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
}

.dialog-content{
  display: flex;

}
.left-content{
  width: 180px;
  padding-right: 30px;
  border-right:1px solid #bbb;
  max-height: 400px;
  overflow: auto;
}
.right-content{
  flex:1;
  padding: 0px 43px 0px 63px;
  max-height: 400px;
  overflow: auto;
}
.user-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .user-name,.user-id{
    font-size: 14px;
    color:#6F6F6F;
  }
}
.formitem-inline{
  display: flex;
  .el-form-item{
    flex:1;
  }
  .el-form-item:not(:last-child){
    margin-right: 30px;
  }
}

.formitem-inline2{
  display: flex;
  .el-form-item{
    flex:1;
  }
  .el-form-item:not(:last-child){
    margin-right: 80px;
  }
  // .float-100{
  //   float: left;
  //   width: 100%;
  // }
}
</style>
